<template>
  <div class="funnel-model tag-scrollbar">
    <div class="model-title">
      <icon-svg name="iconFunnel"></icon-svg>
      漏斗分析
    </div>
    <div class="model-wrap tag-scrollbar">
      <div class="item-top"><i class="el-icon-caret-bottom"></i>建立漏斗</div>
      <el-form :model="editForm" ref="editForm" label-width="0">
        <div class="item-content params-content">
          <template v-for="(item, index) in editForm.funnelParam">
            <funnel-step-item
              :key="index"
              :config="item"
              :stepIndex="index"
              :formNm="'funnelParam.' + index"
              @deleteStep="handleDelete"
            ></funnel-step-item>
          </template>
          <div class="step-btn" @click="addParam"><i class="el-icon-circle-plus"></i>添加步骤</div>
        </div>
        <div class="item-top"><i class="el-icon-caret-bottom"></i>维度分层</div>
        <div class="item-content filter-content">
          <tag-selector :tagInfo="dimensionColumn" @confirm="confirmDimension"></tag-selector>
          <el-button
            type="primary"
            icon="el-icon-close"
            plain
            circle
            size="mini"
            class="delete-btn"
            @click="removeDimension"
            v-if="dimensionColumn.labId"
          ></el-button>
        </div>
        <div class="item-top"><i class="el-icon-caret-bottom"></i>公共过滤条件</div>
        <div class="item-content">
          <tag-selector
            :tagInfo="{ tagId: '', tagNm: '' }"
            v-if="!editForm.filteringConditions.derivedTag.request.labGrps.labs.length"
            @confirm="confirmConditions"
          ></tag-selector>
          <funnel-filter :config="editForm.filteringConditions" formNm="filteringConditions" v-else></funnel-filter>
        </div>
        <div class="item-top"><i class="el-icon-caret-bottom"></i>选择客群</div>
        <div class="item-content">
          <tag-customer-selector :custInfo="customers" @confirm="confirmCustomers"></tag-customer-selector>
          <el-button
            type="primary"
            icon="el-icon-close"
            plain
            circle
            size="mini"
            class="delete-btn"
            @click="removeCustomers"
            v-if="customers.tagId_set.length"
          ></el-button>
        </div>
      </el-form>
    </div>
    <div class="model-btn">
      <el-button type="primary" size="mini" @click="getResults">查询</el-button>
    </div>
  </div>
</template>

<script>
import funnelStepItem from './funnel-step-item'
import funnelFilter from './funnel-filter'
export default {
  components: {
    funnelStepItem,
    funnelFilter
  },
  data() {
    return {
      editForm: {
        funnelParam: [],
        filteringConditions: {
          derivedTag: {
            request: {
              dataDate: '',
              labGrps: {
                labs: [],
                level: 1,
                logicTyp: 'and'
              },
              grpFlter: []
            },
            extra: {},
            cache: {}
          }
        }
      },
      dimensionColumn: {
        status_code: '0',
        column: '',
        show_column: '',
        datTyp: '',
        labId: '',
        oprator: '',
        operationType: '',
        operationValue: '',
        isDerLabel: '0',
        val: '',
        valLft: '',
        valRit: '',
        valArray: []
      },
      customers: {
        status_code: '0',
        show_column: '',
        selectCust: [],
        tagId_set: []
      }
    }
  },
  methods: {
    init(params) {
      this.editForm.funnelParam = params.funnelParam
      this.editForm.filteringConditions = params.filteringConditions
      this.dimensionColumn = params.dimensionColumn
      this.customers = params.customers
    },
    addParam() {
      this.editForm.funnelParam.push({
        lab_column: '',
        show_lab_column: '',
        derivedTag: {
          request: {
            dataDate: '',
            labGrps: {
              logicTyp: '',
              level: 1,
              labs: []
            },
            grpFlter: []
          },
          extra: {},
          cache: {}
        }
      })
    },
    handleDelete(index) {
      this.editForm.funnelParam.splice(index, 1)
    },
    initValue(arg) {
      arg.derivedTag.request.labGrps.labs.forEach(item => {
        if (!arg.derivedTag.cache[item.labId]) arg.derivedTag.cache[item.labId] = { tagNm: item.tagNm }
        if (item.valueType == '1') {
          item.val = ''
          item.valLft = ''
          item.valRit = ''
          item.valArray = item.operationValue
        } else if (item.valueType == '4' || item.valueType == '5' || item.valueType == '6' || item.valueType == '7') {
          if (item.oprator == 'a<=x<b') {
            item.val = ''
            item.valLft = item.operationValue[0]
            item.valRit = item.operationValue[1]
            item.valArray = []
          } else {
            item.val = item.operationValue
            item.valLft = ''
            item.valRit = ''
            item.valArray = []
          }
        } else {
          item.val = item.operationValue
          item.valLft = ''
          item.valRit = ''
          item.valArray = []
        }
      })
    },
    getParams() {
      this.editForm.funnelParam.forEach(item => {
        this.initValue(item)
      })
      this.initValue(this.editForm.filteringConditions)
      const params = {
        iconDescription: '',
        funnelAnalysisName: '',
        funnelParam: this.editForm.funnelParam,
        dimensionColumn: this.dimensionColumn,
        filteringConditions: this.editForm.filteringConditions,
        customers: this.customers,
        startEndTime: {},
        tableName: ''
      }
      return params
    },
    getResults() {
      let stepSet = new Set()
      this.editForm.funnelParam.forEach(item => stepSet.add(item.show_lab_column.trim()))
      if (stepSet.size !== this.editForm.funnelParam.length) {
        this.$message.info('漏斗步骤不能同名！')
        return
      }
      if (this.editForm.funnelParam.length < 2) {
        this.$message.info('请至少选择两个步骤组成漏斗！')
        return
      }
      if (this.dimensionColumn.status_code === '1' && this.customers.status_code === '1') {
        this.$message.info('维度分层和客群不能同时选择！')
        return
      }
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$emit('toggleLoading')
          this.$ajax({
            url: this.$ajax.setUrl('funnelAnalysis/showFunnelInfo'),
            method: 'post',
            data: this.$ajax.setData(this.getParams())
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.$emit('callback', data.data)
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.$emit('toggleLoading')
          })
        }
      })
    },
    confirmDimension(item) {
      this.dimensionColumn.status_code = '1'
      this.dimensionColumn.column = item.labFldMap
      this.dimensionColumn.datTyp = item.dbVal
      this.dimensionColumn.labId = item.assetCode
      this.dimensionColumn.tagId = item.assetId
      this.dimensionColumn.tagNm = item.assetNm
    },
    removeDimension() {
      this.dimensionColumn = {
        status_code: '0',
        column: '',
        show_column: '',
        datTyp: '',
        labId: '',
        oprator: '',
        operationType: '',
        operationValue: '',
        isDerLabel: '0',
        val: '',
        valLft: '',
        valRit: '',
        valArray: []
      }
    },
    confirmConditions(item) {
      this.editForm.filteringConditions.derivedTag.request.labGrps.labs = [
        {
          labTbl: item.labTbl,
          oprator: '',
          datTyp: item.dbVal,
          logicTyp: 'and',
          labFldMap: item.labFldMap,
          dtTyp: '',
          labId: item.assetCode,
          tagId: item.assetId,
          tagNm: item.assetNm,
          isDerLabel: '0',
          valueType: item.valueType,
          operationType: '',
          operationValue: '',
          val: '',
          valLft: '',
          valRit: '',
          valArray: [],
          enums: item.enums
        }
      ]
    },
    confirmCustomers(cust) {
      let ids = []
      cust.forEach(item => ids.push(item.tagId))
      this.customers.status_code = '1'
      this.customers.selectCust = cust
      this.customers.tagId_set = ids
    },
    removeCustomers() {
      this.customers = {
        status_code: '0',
        show_column: '',
        selectCust: [],
        tagId_set: []
      }
    }
  }
}
</script>

<style lang="scss">
.funnel-model {
  width: 300px;
  height: 100%;
  float: left;
  box-shadow: 2px 2px 5px #eee, -2px 2px 5px #eee;
  .model-title {
    font-weight: bold;
    line-height: 40px;
    svg {
      width: 16px;
      height: 16px;
      margin: 0 5px 0 10px;
      color: $theme-color;
    }
  }
  .model-wrap {
    height: calc(100% - 40px - 50px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .item-top {
    color: #fff;
    background-color: #6a86cc;
    line-height: 40px;
    padding: 0 10px;
    i {
      margin-right: 10px;
    }
  }
  .item-content {
    padding: 15px 0;
    &:not(.params-content) {
      padding: 15px 10px;
    }
    .delete-btn {
      width: 18px;
      height: 18px;
      padding: 1px;
      margin-left: 10px;
      display: none;
    }
    &:hover {
      .delete-btn {
        display: inline-block;
      }
    }
  }
  .step-btn {
    width: 280px;
    margin: 10px;
    padding: 0 10px;
    line-height: 40px;
    cursor: pointer;
    &:hover {
      background-color: #f2f6ff;
    }
    i {
      font-size: 18px;
      color: #6a86cc;
      margin: -3px 5px 0 0;
      vertical-align: middle;
    }
  }
  .filter-content {
    .el-form-item__content {
      line-height: normal;
    }
  }
  .model-btn {
    border-top: 1px solid #eee;
    padding: 10px;
    text-align: right;
  }
}
</style>
